<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <link href="${applicationScope.basePath}/css/login.css" rel="stylesheet">
    <link href="${applicationScope.basePath}/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <form id="sub_form" action="${applicationScope.basePath}/user/checkLogin" method="post">
        <div class="box">
            <div class="title">
                <img src="${applicationScope.basePath}/images/login_logo.png">
                <span style="text-align: center;">欢迎登录二手交易平台</span>
            </div>
            <div id="error_box" style="text-align: center;"><span id="error_msg"></span></div>
            <div class="input_box">
                <input class="username_input" required="required" id="email" type="email" placeholder="请输入邮箱" name="email"/>
            </div>
            <div class="input_box">
                <input class="password_input" required="required"  type="password" placeholder="请输入密码" id="password" name="password"/>
            </div>
            <div class="input_check_box">
                <input class="checkcode_input" required="required" type="text" placeholder="请输入验证码" id="check" name="checkCode"/>
                <a href="javascript:;">
                    <img id="check_code" style="float: right;margin-right: 30px;" src="${applicationScope.basePath}/user/checkCode" onclick="refreshCode();" title="看不清点击刷新" alt=""/>
                </a>
            </div>
            <div class="input_box">
                <input id="sub_btn" type="submit" value="登录"/>
            </div>
            <div>
                <a  href="#" data-toggle="modal" data-target="#forget"
                    style="float: left;margin-top: 10px;color: #b6b4b9;">忘记密码?</a>
                <a href="${applicationScope.basePath}/register"
                   style="float: right;margin-top: 10px;color: #b6b4b9;">立即注册</a>
            </div>
        </div>
    </form>
</div>


<!-- Modal -->
<div class="modal fade" id="forget" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="height: 50px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">忘记密码<span id="forget_msg" style="margin-left: 20px;color: red;font-size: 14px;"></span></h4>
            </div>
            <div class="modal-body">
                <form id="forgetForm" action="#" style="margin:0 auto;width: 80%;">
                    <div class="form-group">
                        <label for="email_input">邮箱</label>
                        <input type="email" required="required" name="email" id="email_input" class="form-control" placeholder="请输入邮箱">
                    </div>
                    <hr/>
                    <p>
                    <h4 class="text-center">找回密码提示</h4>
                    <hr/>
                        如果收不到邮件，请按这个步骤处理:<br/>
                        0.稍等3分钟左右，再看看（可能存在网络延迟）<br/>
                        1.垃圾箱找找看<br/>
                        2.如果确实找不到请加官方QQ号：3309408160,请注明找回密码问题<br/>
                    </p>
                </form>
            </div>
            <div class="modal-footer" style="height: 70px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                <button id="sub_email" form="forgetForm" type="submit" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
<script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
<script src="${applicationScope.basePath}/js/jquery.form.min.js"></script>
<script type="text/javascript" src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script>
    //切换验证码图片
    function refreshCode() {
        //获取验证码对象
        let code = document.getElementById("check_code");
        //设置其src属性，加上上时间戳
        code.src = "${applicationScope.basePath}/user/checkCode?time=" + new Date().getTime();
    }
    $(function (encodedURIComponent) {
        //定义此标志位，防止表单重复提交
        let flag=true;
        /*提交登录表单*/
        let options = {
            beforeSubmit:function(){
                return $("#email").val() !== '' && $("#password").val() !== '' && $("#check").val !== '';
            },
            success: function (data) {
                <!-- 处理后端返回的数据 -->
                if (data.flag) {
                    //注册成功,跳转到成功页面
                    window.location.href = "${applicationScope.basePath}/home";
                } else {
                    //注册失败
                    //刷新验证码
                    $("#check_code").attr("src","${applicationScope.basePath}/user/checkCode?time=" + new Date().getTime());
                    $("#error_box").text(data.errorMsg);
                }
                flag = true;
            },
            error:function () {

            }
        };
        $('#sub_form').submit(function() {
            if(flag){
                $(this).ajaxSubmit(options);
                flag = false;
            }
            return false;
        });



        /*提交忘记密码表单*/
        $("#forgetForm").submit(function (encodedURIComponent) {
            $("#sub_email").button('loading');
            let data = JSON.stringify($("#forgetForm").serializeJSON());
            $.ajax({
                url: "${applicationScope.basePath}/user/password/forget",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success: function (data) {
                    $("#sub_email").button('reset');
                    if (data.flag) {
                        alert("请前往邮箱获取新密码");
                        location.reload();
                    } else {
                        $("#forget_msg").text(data.errorMsg);
                    }
                },
                error: function (data) {
                    //跳转到错误页面
                }
            });
            return false;
        });

    });
</script>
</html>
